<template>
  <div class="good-radio">
    <home-nav title="优秀新电台" :more="false" />
    <ul class="grid  gap-4" :class="store.isFlag ?  'grid-cols-4' : 'grid-cols-2'">
      <li v-for="item in radioTypeData" :key="item.id" style="margin: 0 auto;">
        <div class="w-40 h-40 cursor-pointer" @click="jumpDjRadio(item.id)">
          <img class="w-full h-full" :src="item.picUrl" alt="">
        </div>
        <div class="flex flex-col w-40 mt-2">
          <span class="text-sm yu-textColor-hover" @click="jumpDjRadio(item.id)">{{ item.name }}</span>
          <span class="text-xs yu-titleColor">{{ item.rcmdtext }}</span>
        </div>
      </li>
    </ul>
  </div>
</template>

<script setup>
import HomeNav from '@/components/HomeNav/index.vue'
import {useStore} from "@/store/index"

const store = useStore()
defineProps({
  radioTypeData: Array // 电台类型数据
})

const $emit = defineEmits(['jumpDjRadio'])

// 跳转到电台详情
const jumpDjRadio = (id) => {
  $emit('jumpDjRadio', id)
}
</script>

<style scoped>

</style>
